<template>
  <div>
    <div style="margin: 10px; padding: 10px; width: 95%; display: inline-block; overflow: auto; background-color: antiquewhite; "
       :style="{height: CONST.WORKSPACE_HEIGHT - 50 + 'px'}">
      <div style="color:#666; display: inline-block; ">题型: </div>
      <div style="display: inline-block; ">{{  exerciseGroup.role }}</div>
      <PreviewExerciseEntry1 :exerciseGroup="exerciseGroup" v-if=" exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A1"/>
      <PreviewExerciseEntryB :exerciseGroup="exerciseGroup" v-else-if=" exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_B"/>
      <PreviewExerciseEntry3 :exerciseGroup="exerciseGroup" v-else-if=" exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A3
                          ||  exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_CASE"/>
    </div>
  </div>
</template>

<script>
  import PreviewExerciseEntry1 from "./PreviewExerciseEntry1";
  import PreviewExerciseEntryB from "./PreviewExerciseEntryB";
  import PreviewExerciseEntry3 from "./PreviewExerciseEntry3";
  import {mapState} from 'vuex'
  export default {
    name: "PreviewExerciseGroup",
    components: {
      PreviewExerciseEntry1,
      PreviewExerciseEntry3,
      PreviewExerciseEntryB},
    data() {
      return {
      }
    },
    computed: {
      ...mapState(['exerciseGroup'])
    },
  }
</script>

<style scoped>

</style>
